<template>
  <div class="page-container-padding">
    <!-- 查询条件 -->
    <div>
      <span>
        <el-date-picker
        style="width:220px;"
          v-model="dateRange"
          type="daterange"
          size="mini"
          :clearable="false"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </span>
      <span style="margin-left:6px;">
        <el-select style="width:130px;" v-model="statisticsType" size="mini">
          <el-option :value="0" label="默认统计方式"></el-option>
          <el-option :value="1" label="小组统计方式"></el-option>
        </el-select>
      </span>
      <span style="margin-left:6px;"><el-button type="primary" size="mini" @click="toQueryStatistics">统计</el-button></span>
      <span style="margin-left:6px;"><el-button type="success" size="mini" @click="currentMonthQuery">计本月</el-button></span>
      <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="preMonthStatistics">上一月</el-button></span>
      <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="nextMonthStatistics">下一月</el-button></span>
      <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="yearStatistics">全年</el-button></span>
      <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="preYearStatistics">上一年</el-button></span>
      <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="nextYearStatistics">下一年</el-button></span>
      <span style="margin-left:6px;">
        <el-tooltip
          class="item"
          effect="dark"
          content="将数据复制到粘贴板，在Excel中粘贴！"
          placement="right-start"
        >
          <el-button type="infor" size="mini" @click="toCopyTable">复制表格</el-button>
        </el-tooltip>
      </span>
    </div>
    <!-- 统计数据 -->
    <div style="margin-top:6px;">
      <div>投资方案统计表</div>
      <div>
        <el-table border stripe :data="planStatisticsList">
          <el-table-column prop="admin_name" label="姓名" width="110px"></el-table-column>
          <el-table-column sortable prop="total_count" label="总数量" width="110px" align="right"></el-table-column>
          <el-table-column sortable prop="success_count" label="成功数" width="110px" align="right"></el-table-column>
          <el-table-column sortable prop="success_rate" label="成功率" width="100px" align="right">
            <template slot-scope="scope">
              <span>{{ (scope.row.success_rate * 100).toFixed(2)}}%</span>
            </template>
          </el-table-column>
          <el-table-column sortable prop="total_profit_rate" label="收益率" width="110px" align="right">
            <template slot-scope="scope">
              <span>{{ (scope.row.total_profit_rate * 100).toFixed(2)}}%</span>
            </template>
          </el-table-column>
          <el-table-column sortable prop="close_finish_count" label="结束量" width="110px" align="right"></el-table-column>
          <el-table-column sortable prop="running_count" label="运行数" width="110px" align="right"></el-table-column>
          <el-table-column sortable prop="finish_count" label="结束数" width="110px" align="right"></el-table-column>
          <el-table-column sortable prop="total_fund" label="总资金" width="110px" align="right"></el-table-column>
          <el-table-column sortable prop="total_profit" label="总收益" width="110px" align="right"></el-table-column>
        </el-table>
        <div style="color:#F34D37;font-size:11px;margin:4px 0;line-height: 18px;">
          注：统计总数量、运行数、结束数的时间基准为创建时间，除此之外的时间基准为方案的结束时间！
          因此，总数量、运行数、结束数是一组数据，其他列为一组数据，两组互无关联。
          <br />
          收益率 = 投入的资金(总资金) ÷ 产出的收益(总收益) x100%
        </div>
      </div>
    </div>

    <!-- 成功率曲线图 -->
    <div v-if="false">
      <div style="margin-top:20px;margin-bottom:6px;">
        <span>
          <el-date-picker
          style="width:220px;"
            v-model="chartDateRange"
            type="daterange"
            size="mini"
            :clearable="false"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </span>
        <span style="margin-left:6px;">
          <el-select v-model="queryChartUser" size="mini">
            <el-option v-for="user in userList" :label="user.admin_name" :value="user.user_id" :key="user.user_id"></el-option>
          </el-select>
        </span>
        <span style="margin-left:6px;"><el-button type="primary" size="mini" @click="queryStatisticChart">查询</el-button></span>
      </div>
      <div style="border: 1px solid #ebeef5;padding:20px 50px;">
        <div style="width:100%;height:400px;">
          <vab-chart autoresize theme="vab-echarts-theme" :option="statisticChartOpt"></vab-chart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VabChart from '@/plugins/echarts'
import { getMonthDatePoint, getYearDatePoint, datetimeToStr } from '@/utils/datetimeUtils'
import { getInvtPlanStatistics, getInvtPlanStChart } from '@/api/departmentWork/investment'
  export default{
    components:{
      VabChart
    },
    data(){
      return {
        dateRange: [],
        statisticsType: 0,
        chartDateRange: [],
        planStatisticsList: [],
        userList: [],
        queryChartUser: 0,
        statisticChartOpt: {
          title: {text: '投资方案累计收益率、成功率', left: 'center'},
          grid: {
            top: '15%',
            left: '2%',
            right: '4%',
            bottom: '0%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              /*boundaryGap: false,*/
              data: [],
              axisTick: {
                alignWithLabel: true,
              },
              axisLabel: {
                rotate:30
              }
            },
          ],
          yAxis: [
            {
              type: 'value',
              name: '累计(%)'
            },
            // {
            //   type: 'value',
            //   name: '当日(%)'
            // }
          ],
          series: [
            {
              name: '累计收益率',
              type: 'line',
              symbol: 'none',
              data: [],
            },
            {
              name: '累计成功率',
              type: 'line',
              symbol: 'none',
              data: [],
            },
            // {
            //   name: '当日收益率',
            //   type: 'line',
            //   symbol: 'none',
            //   yAxisIndex:1,
            //   data: []
            // },
            // {
            //   name: '当日成功率',
            //   type: 'line',
            //   symbol: 'none',
            //   yAxisIndex:1,
            //   data: []
            // }
          ],
          legend:{
            right: '4%',
            data: [
              {name: '累计收益率'},{name: '累计成功率'},
              // {name: '当日收益率'},{name: '当日成功率'}
           ]
          },
          // formatter: '{b0}<br />{a0}: <strong style=color:#5c7bd9>{c0}%</strong>'
          tooltip: {trigger: 'axis'}
        },
      }
    },
    mounted() {
      this.setCurrentDates()
      this.queryStatistics()
      // this.queryStatisticChart()
    },
    methods:{
      setCurrentDates(){
        let flag = new Date().getDate() < 4 ? 'previous' : 'current'
        this.dateRange = getMonthDatePoint(new Date(), flag)
        let year = new Date(this.dateRange[0]).getFullYear()
        this.chartDateRange = getYearDatePoint(year, 'current')
      },

      // 查询统计图形数据
      queryStatisticChart() {
        const params = {
          start: datetimeToStr(this.chartDateRange[0], true, ''),
          end: datetimeToStr(this.chartDateRange[1], true, ''),
          user:this.queryChartUser
        }
        getInvtPlanStChart(params).then(res => {
          const chartData = res.data
          let chartOpt = JSON.parse(JSON.stringify(this.statisticChartOpt))
          chartOpt.xAxis[0].data = chartData.map(item=>item.close_date)
          chartOpt.series[0].data = chartData.map(item=>(item.cum_profit_rate*100).toFixed(2))
          chartOpt.series[1].data = chartData.map(item=>(item.cum_success_rate*100).toFixed(2))
          // chartOpt.series[2].data = chartData.map(item=>(item.current_profit_rate*100).toFixed(2))
          // chartOpt.series[3].data = chartData.map(item=>(item.current_success_rate*100).toFixed(2))
          this.statisticChartOpt = chartOpt
        })
      },

      // 统计数据查询
      queryStatistics(){
        const params = {
          start: datetimeToStr(this.dateRange[0], true, ''),
          end: datetimeToStr(this.dateRange[1], true, ''),
          st: this.statisticsType
        }
        getInvtPlanStatistics(params).then(res => {
          this.planStatisticsList = res.data
          this.userList = this.planStatisticsList.map(item => {
            return {
              user_id: item.user_id,
              admin_name: item.admin_name
            }
          })
          this.userList.unshift({user_id: 0, admin_name: '全部'})
        })
      },

      toCopyTable() {
        const labelKey = [
          'admin_name',
          'total_count',
          'success_count',
          'success_rate',
          'total_profit_rate',
          'close_finish_count',
          'running_count',
          'finish_count',
          'total_fund',
          'total_profit',
        ]
        let dataStr = '姓名\t总数量\t成功数\t成功率\t收益率\t结束量\t运行数\t结束数\t总资金\t总收益\t\n'
        this.planStatisticsList.forEach((ele) => {
          labelKey.forEach((k) => {
            if (k === 'success_rate' || k === 'total_profit_rate') {
              dataStr += (ele[k] * 100).toFixed(2) + '%\t'
            } else {
              dataStr += ele[k] + '\t'
            }
          })
          dataStr += '\n'
        })
        navigator.clipboard.writeText(dataStr).then(
          () => {
            this.$message({
              message: '数据已复制到粘贴板',
              type: 'success',
              duration: 1000,
            })
          },
          () => {
            this.$message({
              message: '复制数据失败',
              type: 'warning',
              duration: 2000,
            })
          }
        )
      },

      // 点击统计日期段
      toQueryStatistics(){
        this.queryStatistics()
      },

      // 本月查询
      currentMonthQuery(){
        this.dateRange = getMonthDatePoint(new Date(), 'current')  // 当前月份
        this.queryStatistics()
      },

      // 点击上一个月
      preMonthStatistics(){
        this.dateRange = getMonthDatePoint(this.dateRange[0], 'previous')
        this.queryStatistics()
      },

      // 点击下一个月
      nextMonthStatistics(){
        this.dateRange = getMonthDatePoint(this.dateRange[0], 'next')
        this.queryStatistics()
      },

      // 点击全年
      yearStatistics(){
        let year = new Date(this.dateRange[0]).getFullYear()
        this.dateRange = getYearDatePoint(year, 'current')
        this.queryStatistics()
      },

      // 点击上一年
      preYearStatistics(){
        let year = new Date(this.dateRange[0]).getFullYear()
        this.dateRange = getYearDatePoint(year, 'previous')
        this.queryStatistics()
      },

      // 点击下一年
      nextYearStatistics(){
        let year = new Date(this.dateRange[0]).getFullYear()
         this.dateRange = getYearDatePoint(year, 'next')
        this.queryStatistics()
      },
    }
  }
</script>

<style scoped>
</style>
